<template>
    <el-dialog 
        title="预定义变量绑定器"
        :visible.sync="getDialogStatus.stPreEdit"
        :fullscreen='true'>

        <el-input placeholder="请输入地址" v-model="url" class="input-with-select">  
            <el-button type="primary" slot="append" icon="el-icon-search" @click="loading">载入</el-button>
        </el-input>
        
        <br><br>
        <el-row>
            <el-col :span="2">
                <el-button type="primary" icon="el-icon-plus" circle @click="addCondition"></el-button>
            </el-col>
            <el-col :span="22">
                <div style="max-height:200px;overflow:auto;border:1px solid #eee;padding:5px">
                    <el-row v-for="(item,index) in searchCondition" :key="index">
                        <el-col :span="5">
                            <el-select v-model="item.field"  placeholder="请选择活动区域">
                                <el-option label="添加时间" value="client_add_dt"></el-option>
                                <el-option label="网咨" value="client_counselor"></el-option>
                                <el-option label="添加平台" value="client_platform"></el-option>
                                <el-option label="账户" value="client_account"></el-option>
                                <el-option label="客户姓名" value="client_name"></el-option>
                                <el-option label="性别" value="client_gender"></el-option>
                                <el-option label="电话" value="client_phone"></el-option>

                                <el-option label="微信/QQ" value="client_wechat_qq"></el-option>
                                <el-option label="咨询项目" value="client_consult_project"></el-option>
                                <el-option label="派单级别" value="client_orders_level"></el-option>
                                <el-option label="预约时间" value="client_appointment_date"></el-option>
                                <el-option label="到诊时间" value="client_visit_date"></el-option>
                                <el-option label="到诊人数" value="client_visit_numbers"></el-option>

                                <el-option label="成交类型" value="client_bargain_type"></el-option>
                                <el-option label="现场咨询" value="client_locale_consult"></el-option>
                                <el-option label="金额" value="client_down_payment"></el-option>
                                <el-option label="付费类型" value="client_visit_type"></el-option>
                                <el-option label="回访时间" value="client_return_visit_date"></el-option>
                                <el-option label="备注" value="client_remarks"></el-option>
                            </el-select>
                        </el-col>
                        <el-col :span="5">
                            <el-select v-model="item.role" placeholder="请选择活动区域">
                                <el-option label="模糊" value="like"></el-option>
                                <el-option label="单独" value="one"></el-option>
                                <el-option label="多个" value="many"></el-option>
                                <el-option label="区域" value="between"></el-option>
                                <el-option label="大于" value="greater"></el-option>
                                <el-option label="小雨" value="less"></el-option>
                                <el-option label="排除" value="notIn"></el-option>
                                <el-option label="空" value="null"></el-option>
                                <el-option label="非空" value="notNull"></el-option>
                                <el-option label="数量" value="count"></el-option>
                            </el-select>
                        </el-col>
                        <el-col :span="8">
                            <el-input v-model="item.value" ></el-input>
                        </el-col>
                        <el-col :span="1">
                            &nbsp;
                        </el-col>
                        <el-col :span="4">
                            <el-button type="danger" icon="el-icon-delete" circle @click="deleteCondition(index)"></el-button>
                            <br><br>
                        </el-col>
                    </el-row>
                </div>
            </el-col>
        </el-row>

        <br><br>
        <el-row>
            <p>原始数据</p>
            <el-col :span="8" v-loading="isloading">
                <div style="border:1px solid #eee;max-height:500px;min-height:400px;overflow:auto;">
                    <el-tree
                        :data="sourceData"
                        show-checkbox
                        :check-strictly='true'
                        node-key="id"
                        @check-change="getCheckedNodes"
                        :props="defaultProps"
                        >
                    </el-tree>
                </div>
            </el-col>
            <el-col :span="16">
                <div style="padding-left:5px;">
                    <el-breadcrumb 
                        separator-class="el-icon-arrow-right" 
                        v-for="(item1,index1) in selectNode" 
                        :key="index1">
                            <span class="breadcrumb-index"> {{index1}}</span>
                            <input 
                                type="text" 
                                :class="{ 'breadcrumb-input':true,'warning':typeof item1.name=='undefined' || item1.name==''}"
                                v-model="item1.name">
                            <span class="breadcrumb-value"> {{ item1.value }}</span>

                            <el-breadcrumb-item 
                            v-for="(item2,index2) in item1.index" 
                            :key="index2">
                                <span class="breadcrumb"> {{item2}}</span>
                            </el-breadcrumb-item>
                    </el-breadcrumb>
                </div>
            </el-col>
        </el-row>

        <br><br>

        <div slot="footer" class="dialog-footer" style="bottom:20px;">
            <el-button @click="closeAllDialog">取 消</el-button>
            <el-button type="primary" @click="updateFm">确 定</el-button>
        </div>

    </el-dialog>
</template>

<script>

import {mapMutations,mapGetters} from 'vuex';

export default {
    props:{
       
    },
    data() {
        return {
            baseUrl:'http://admin.jinggangym.com/api/v1/search?',
            url:'http://admin.jinggangym.com/api/v1/search?',
            sourceData:[],
            defaultProps:{
                children: 'children',
                label: 'label'
            },

            selectNode:[],//查询节点
            isloading:false,//加载状态
            searchCondition:[],
        };
    },
    computed:{
        ...mapGetters(['getDialogStatus','getCurrentActiveTable','getTables'])
    },
    watch:{
        searchCondition:{
            handler(newVal,oldVal){
                let strProps='';
                for(let i in newVal){
                    strProps+=`${newVal[i].field}[role]=${newVal[i].role}`;
                    strProps+=`&`;
                    strProps+=`${newVal[i].field}[value]=${newVal[i].value}`;
                    strProps+=`&`;
                }
                this.url=this.baseUrl+strProps;
            },
            deep:true
        }
    },
    methods:{
        ...mapMutations(['setDialogStatus','closeAllDialog','updateFormulas']),
        loading(){
            this.isloading=true;
            axios.get(this.url).then((res)=>{
                this.originalData=res.data;
                this.sourceData=res.data;
                //console.log(this.sourceData);
                this.sourceData=this.formatData(this.sourceData,[]);
                //console.log(this.sourceData);
                this.isloading=false;
                this.selectNode=[];
            });
        },

        //使用递归生成Data树
        formatData(data,baseIndex){
            var tempData=[];
            for(let i in data){
                /**
                 * 因为 js 数组的引用传值，所以通过与空数组的合并来生成新的数组
                 */
                let subBaseIndex=[];
                subBaseIndex=subBaseIndex.concat(baseIndex);
                subBaseIndex.push(i);
                tempData.push({
                    label:i,
                    index:subBaseIndex, //作为该 节点的绝对地址
                    children:this.formatData(data[i],subBaseIndex)
                })
            }
            return tempData;
        },

        getCheckedNodes(a,b,c){
            
            if(a.children.length==0){
                //如果是选择
                if(b){
                    var tempValue='';
                    //解析选项下标中所对应的值
                    for(let i in a.index){
                        console.log(a.index[i]);
                        if(i==0){
                            tempValue=this.originalData[a.index[0]];
                            console.log('i==0',a.index[0],this.originalData,tempValue);
                        }else{
                            tempValue=tempValue[a.index[i]]
                        }
                        console.log('00000',this,tempValue);
                    }
                    a.value=tempValue;
                    this.selectNode.push(a);
                    //console.log(this.selectNode);
                }else{
                //取消选择 从列表中删除
                    for(let i in this.selectNode){
                        if(this.selectNode[i].$treeNodeId==a.$treeNodeId){
                            this.selectNode.splice(i,1);
                        }
                    }
                }
            }else{
                this.$message('高级节点不能添加绑定');
            }
        },

        updateFm(){
            let currentIndex=this.getCurrentActiveTable;

            this.updateFormulas({
                index:currentIndex.index,
                data:{
                    url:this.url,
                    hashTable:this.selectNode
                }
            });
            this.closeAllDialog();
            this.$message({
                message: '预定义变量插入成功',
                type: 'success'
            });
            this.selectNode=[];
            this.sourceData=[];
        },


        addCondition(){
            this.searchCondition.push({
                field:'',
                role:'',
                value:''
            })
        },
        deleteCondition(index){
            this.searchCondition.splice(index,1);
        }

    }
}
</script>

<style>
.breadcrumb{
    display: inline-block;
    background: #eee;
    padding: 5px;
    margin-top:5px;
}
.breadcrumb:hover{
    background: #409EFF;
    color: #fff;
    cursor: pointer;
}
.breadcrumb-input{
    float: left;
    border:1px solid #ccc;
    border-left:none;
    width: 100px;
    outline: #409EFF;
    display: inline-block;
    padding: 3px;
    margin-top:5px;
    margin-right: 10px;
}
.breadcrumb-index{
    display: inline-block;
    background: #409EFF;
    
    border-bottom:none;
    color: #fff;
    padding: 4px;
    margin-top:5px;
    float: left;
    width: 30px;
}
.breadcrumb-value{
    display: inline-block;
    background: #409EFF;
    
    border-bottom:none;
    color: #fff;
    padding: 4px;
    margin-top:5px;
    float: left;
    width: 60px;
    margin-right: 10px;
}
.warning{
    width: 100px;
    background: #F56C6C;
    border:#F56C6C 1px solid
}
</style>
